<template>
    <div class="list-detail-box">
        <div class="list-t">
            <div>
                <p class="text-xl text-black">歌曲列表</p>
            </div>
            <div class="col-span-3 flex items-end">
                <p class="text-xs">共{{ trackCount }}首歌曲</p>
            </div>
            <div></div>
            <div></div>
            <div class="flex items-end" v-show="isShowPlayCount">
                <span>播放:</span>
                <span class="text-red-500">{{ playCount }}</span>
                <span>次数</span>
            </div>
        </div>
        <div class="list-m">
            <div class="list-m-top">
                <div class="border-r"></div>
                <div class="p-2 col-span-3">歌曲标题</div>
                <div class="p-2">时长</div>
                <div class="p-2">歌手</div>
                <div class="p-2">专辑</div>
            </div>
            <div class="list-m-content border-t border-b" v-for="(item, index) in tracks" :key="index">
                <div class="flex">
                    <div class="w-1/2 flex justify-center p-1">{{ index + 1 }}</div>
                    <div class="w-1/2 flex justify-center cursor-pointer p-1" @click="singlePlay(item.id)">
                        <n-icon size="20" @mouseenter="isShowPlayIconBacg(index, '#515151')"
                                @mouseleave="isShowPlayIconBacg(index, '#999999')">
                            <svg t="1628492636847" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="1211" width="200" height="200">
                                <path
                                    d="M512 960C264.576 960 64 759.424 64 512S264.576 64 512 64s448 200.576 448 448-200.576 448-448 448z m0-64c212.077 0 384-171.923 384-384S724.077 128 512 128 128 299.923 128 512s171.923 384 384 384z m134.51-329.505L442.78 691.96c-15.048 9.267-34.76 4.58-44.028-10.468a32 32 0 0 1-4.752-16.78V359.288c0-17.673 14.327-32 32-32a32 32 0 0 1 16.78 4.752l203.73 125.465c30.097 18.535 39.47 57.958 20.935 88.055a64 64 0 0 1-20.935 20.935z"
                                    p-id="1212" :fill="playIconColor[index]"></path>
                            </svg>
                        </n-icon>
                    </div>
                </div>
                <div class="col-span-3 text-gray-700  p-1 flex items-center cursor-pointer hover:underline" @click="getRouterToSongDetail(item.id)" :title="item.name">
                    {{calString(item.name, 40)}}
                </div>
                <div class="p-1 flex items-center" @mouseleave="isShowTimeIcon(false, index)"
                     @mouseenter="isShowTimeIcon(true, index)">
                    <div v-show="!timeIconShow[index]">
                        {{ calMSToMinAndS(item.dt) }}
                    </div>
                    <div class="icon-time" v-show="timeIconShow[index]">
                        <n-icon size="20" class="cursor-pointer" @mouseenter="showTimeIconIdx(index, 0, '#515151')"
                                @mouseleave="showTimeIconIdx(index, 0, '#999999')" title="添加">
                            <svg t="1628494370131" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="3311" width="200" height="200">
                                <path
                                    d="M724.398 473.741h-174.14v-174.14c0-21.042-17.217-38.259-38.259-38.259s-38.259 17.216-38.259 38.259v174.14H299.6c-21.042 0-38.259 17.216-38.259 38.259 0 21.042 17.217 38.259 38.259 38.259h174.14v174.14c0 21.042 17.217 38.259 38.259 38.259s38.259-17.216 38.259-38.259v-174.14h174.14c21.042 0 38.259-17.216 38.259-38.259 0-21.042-17.217-38.259-38.259-38.259z"
                                    :fill="timeIconColor[index][0]" p-id="3312"></path>
                            </svg>
                        </n-icon>
                        <n-icon size="20" class="cursor-pointer" @mouseenter="showTimeIconIdx(index, 1, '#515151')"
                                @mouseleave="showTimeIconIdx(index, 1, '#999999')" title="分享">
                            <svg t="1628241472898" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="7130" width="200" height="200">
                                <path
                                    d="M972.8 549.9136v294.7584A128.0768 128.0768 0 0 1 844.8 972.8H179.2a128 128 0 0 1-128-128V179.2c0-70.7328 57.1904-128 127.872-128h202.3168a25.6 25.6 0 0 0 0-51.2H179.072A179.072 179.072 0 0 0 0 179.2v665.6a179.2 179.2 0 0 0 179.2 179.2h665.6c98.944 0 179.2-80.2816 179.2-179.328V549.9136a25.6 25.6 0 0 0-51.2 0z"
                                    p-id="7131" :fill="timeIconColor[index][1]"></path>
                                <path
                                    d="M960 128c-353.4592 0-640 286.5408-640 640a25.6 25.6 0 0 0 51.2 0c0-325.1968 263.6032-588.8 588.8-588.8a25.6 25.6 0 0 0 0-51.2z"
                                    p-id="7132" :fill="timeIconColor[index][1]"></path>
                                <path
                                    d="M720.1024 62.1568l256 102.4a25.6 25.6 0 0 0 18.9952-47.5136l-256-102.4a25.6 25.6 0 0 0-18.9952 47.5136z"
                                    p-id="7133" :fill="timeIconColor[index][1]"></path>
                                <path
                                    d="M808.8064 348.4672l194.6368-189.312a25.6 25.6 0 1 0-35.6864-36.7104L773.12 311.7568a25.6 25.6 0 1 0 35.6864 36.7104z"
                                    p-id="7134" :fill="timeIconColor[index][1]"></path>
                            </svg>
                        </n-icon>
                        <n-icon size="20" class="cursor-pointer" @mouseenter="showTimeIconIdx(index, 2, '#515151')"
                                @mouseleave="showTimeIconIdx(index, 2, '#999999')" title="收藏">
                            <svg t="1628241310757" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="5958" width="200" height="200">
                                <path
                                    d="M799.97 959.56H224.03c-65.18 0-118.22-53.01-118.22-118.19v-659.2c0-65.18 53.04-118.22 118.22-118.22h409.16c31.58 0 61.27 12.31 83.59 34.63l166.78 166.78c22.32 22.32 34.63 52.01 34.63 83.59v492.42c0 65.18-53.04 118.19-118.22 118.19zM224.03 131.88c-27.73 0-50.29 22.56-50.29 50.29v659.2c0 27.7 22.56 50.25 50.29 50.25h575.94c27.73 0 50.29-22.56 50.29-50.25V348.95c0-13.43-5.24-26.07-14.73-35.56L668.75 146.61c-9.49-9.49-22.12-14.73-35.56-14.73H224.03z"
                                    p-id="5959" :fill="timeIconColor[index][2]"></path>
                                <path
                                    d="M644.87 750.18a33.91 33.91 0 0 1-15.82-3.91l-117.06-61.53-117.03 61.53c-11.41 6.04-25.24 5.08-35.79-2.59-10.45-7.6-15.69-20.47-13.5-33.2l22.36-130.33-94.74-92.35c-9.25-9.02-12.57-22.52-8.59-34.8a33.975 33.975 0 0 1 27.43-23.12l130.89-19.04 58.51-118.59c11.41-23.22 49.49-23.22 60.9 0l58.55 118.59 130.89 19.04A33.975 33.975 0 0 1 759.3 453c3.98 12.27 0.66 25.77-8.59 34.8l-94.74 92.35 22.36 130.33a33.929 33.929 0 0 1-13.5 33.2c-5.9 4.31-12.93 6.5-19.96 6.5zM511.98 612.39c5.44 0 10.85 1.29 15.82 3.91l71.95 37.81L586.02 574a33.964 33.964 0 0 1 9.75-30.05l58.21-56.76-80.44-11.71c-11.08-1.59-20.63-8.56-25.57-18.58l-35.99-72.88-35.96 72.88a33.927 33.927 0 0 1-25.57 18.58l-80.44 11.71 58.21 56.76a33.973 33.973 0 0 1 9.75 30.05l-13.73 80.11 71.91-37.81c4.99-2.61 10.39-3.91 15.83-3.91z"
                                    p-id="5960" :fill="timeIconColor[index][2]"></path>
                            </svg>
                        </n-icon>
                        <n-icon size="20" class="cursor-pointer" @mouseenter="showTimeIconIdx(index, 3, '#515151')"
                                @mouseleave="showTimeIconIdx(index, 3, '#999999')" title="下载">
                            <svg t="1628241513205" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="8179" width="200" height="200">
                                <path
                                    d="M206.336 894.976c-70.144 0-110.08-39.936-110.08-110.08v-192.512c0-11.776 9.728-21.504 21.504-21.504 32.256 0 70.144-4.608 70.144 26.112v177.664c0 15.36 12.288 27.136 27.136 27.136h593.92c15.36 0 27.648-12.288 27.648-27.648v-182.272c0-11.776 9.728-21.504 21.504-21.504 32.256 0 70.144-4.608 70.144 26.112v193.024c0 70.144-34.304 104.448-104.448 104.448l-617.472 1.024z"
                                    :fill="timeIconColor[index][3]" p-id="8180"></path>
                                <path
                                    d="M512 662.016c-23.552 0-45.568-18.944-45.568-43.008V135.68c0-23.552 22.016-26.112 45.568-26.112s45.568 2.048 45.568 26.112v483.328c0 23.552-22.016 43.008-45.568 43.008z"
                                    :fill="timeIconColor[index][3]" p-id="8181"></path>
                                <path
                                    d="M509.952 677.888c-11.264 0-22.528-4.608-30.72-12.288L281.6 467.968c-20.992-20.992-19.968-40.96 0-60.928s40.96-25.088 60.928-5.12l166.912 166.912L686.08 392.192c14.848-14.848 36.352-5.632 53.248 11.264s24.064 38.4 7.68 54.784l-207.36 206.336c-7.68 7.68-18.944 12.288-30.72 12.288 1.024 0.512 1.024 1.024 1.024 1.024z"
                                    :fill="timeIconColor[index][3]" p-id="8182"></path>
                            </svg>
                        </n-icon>
                    </div>
                </div>
                <div class="p-1 flex items-center text-gray-700 cursor-pointer hover:underline" :title="arName[index]" @click="getRouterToArtistInfo(item.ar[0].id)">
                    {{ calArName(item.ar, index) }}
                </div>
                <div class="p-1 flex items-center text-gray-700 cursor-pointer hover:underline" :title="alName[index]" @click="getRouterToAlbumList(item.al.id)">
                    {{ calAlbumName(item.al.name, index) }}
                </div>
            </div>
        </div>
<!--        <div class="list-b flex justify-center items-center">-->
<!--            <div>-->
<!--                <div class="text-2xl mt-4">如需显示更多,请下载客户端</div>-->
<!--            </div>-->
<!--        </div>-->
    </div>
</template>

<script>
import {NIcon, useNotification} from 'naive-ui';
import {reactive, toRefs} from "vue";
import {useRouter} from "vue-router";

import {getSingleMusicPlay} from "@/util/music"
import {useStore} from "vuex";
export default {
    // 歌单列表组件
    name: "SongListDetail",
    props: {
        id: {
            type: String,
            default: '-1'
        },
        songList: {
            type: Array,
            default: () => []
        },
        trackCount: {
            type: Number,
            default: 0
        },
        playCount: {
            type: Number,
            default: 0
        },
        tracks: {
            type: Array,
            default: () => []
        },
        isShowPlayCount: {
            type: Boolean,
            default: true
        }
    },
    setup() {
        const TAG = "SongListDetail.vue";
        const router = useRouter(); // 显示加载遮罩
        const store = useStore();
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        const listDetailInfo = reactive({
            // 播放按钮的颜色
            playIconColor: new Array(10).fill('#999999'),
            // 时长隐藏按钮hover效果数组
            timeIconShow: new Array(10).fill(false),
            // 模拟时长隐藏按钮中四个按钮的hover颜色效果的数组
            timeIconColor: new Array(10).fill(Array(4).fill('#999999')),
            // 专辑名字数组
            alName: [''],
            // 歌手名字数组
            arName: ['']
        })
        // 是否显示时长隐藏按钮
        const isShowTimeIcon = (flag, index) => {
            listDetailInfo.timeIconShow[index] = flag;
        }
        // 在显示时长隐藏按钮的情况下模拟hover效果
        const showTimeIconIdx = (index, col, color) => {
            listDetailInfo.timeIconColor[index][col] = color;
        }
        // 播放按钮hover效果
        const isShowPlayIconBacg = (index, color) => {
            listDetailInfo.playIconColor[index] = color;
        }
        // 将毫秒格式化
        const calMSToMinAndS = (ms) => {
            let mss = parseInt(ms);
            let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
            let seconds = parseInt((mss % (1000 * 60)) / 1000);
            if (hours == 0) {
                return minutes + " : " + seconds;
            }
            return hours + " : " + minutes + " : " + seconds;
        }
        // 计算字符串的长度，避免长度过长
        const calString = (str, len) => {
            if (str.length < len) {
                return str;
            } else {
                return str.slice(0, len) + '..';
            }
        }
        // 计算歌曲作者
        const calArName = (object, index) => {
            let resString = '';
            if (typeof (object) == "undefined" || !object) {
                return resString;
            }
            // 歌曲有多个作者
            if (object.length > 1) {
                object.forEach((item) => {
                    resString += item.name + '/';
                })
            } else {
                resString += object[0].name
            }
            listDetailInfo.arName[index] = resString;
            return calString(resString, 8);
        }
        // 计算专辑名字
        const calAlbumName = (str, index) => {
            listDetailInfo.alName[index] = str;
            return calString(str, 8);
        }
        // 播放列表中的单曲播放
        const singlePlay = (id) => {
            beLoading();
            getSingleMusicPlay(id);
        }
        // 通知组件
        const notification = useNotification();
        // 跳转歌曲详情页面
        const getRouterToSongDetail = (ids) => {
            if (ids == 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return null;
            } else {
                router.push({path: '/song', query: {ids}});
            }
        }
        
        // 跳转专辑详情页面
        const getRouterToAlbumList = (id) => {
            if (id == 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return null;
            } else {
                router.push({path: '/album', query: {id}});
            }
        }
        // 跳转歌手详情页面
        const getRouterToArtistInfo = (id) => {
            if (id == 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return null;
            } else {
                router.push({path: '/artist', query: {id}});
            }
        }
    
        return {
            ...toRefs(listDetailInfo),
            isShowTimeIcon,
            isShowPlayIconBacg,
            showTimeIconIdx,
            calMSToMinAndS,
            calString,
            calArName,
            calAlbumName,
            getRouterToSongDetail,
            getRouterToAlbumList,
            getRouterToArtistInfo,
            singlePlay
        }
    },
    components: {
        NIcon
    }
}
</script>

<style scoped lang="scss">
.list-detail-box {
    .list-t {
        @apply flex grid grid-cols-7;
        color: #999999;
        border-bottom: 2px solid #c20c0c;
    }
    
    .list-m {
        @apply border;
        .list-m-top {
            @apply flex grid grid-cols-7;
            color: #666666;
            background: #f8f8f8;
        }
        
        .list-m-content {
            color: #999999;
            @apply flex grid grid-cols-7;
            .icon-time {
                @apply flex items-center;
            }
        }
    }
}
</style>